<script setup>
import { reactive, toRefs } from "vue";
import MyDatails from "../../components/MyDatails.vue";
import { getImgCodeAPi, geLoginAPi } from "../../http/http";
import { Toast } from "vant";
import "vant/es/toast/style";
import { useRouter } from "vue-router";
const { push } = useRouter();
const data = reactive({
  form: {
    // 手机号
    mobile: "",
    // 手机验证码
    sms_code: "",
    // 图像验证码
    captcha: "",
    // 图像key值
    key: "",
    device_id: "1",

    device_type: "2",
    user_pass: "",
  },
  // 图形验证码
  getImgCode: "",
});
// 点击登录
const login = async () => {
  let res = await geLoginAPi(data.form);
  const { user_nickname, avatar, remember_token, is_new_user, mobile, id } =
    res.data;
  localStorage.setItem(
    "token",
    JSON.stringify({ user_nickname, avatar, remember_token, mobile, id })
  );

  // 当状态为0时 为新用户 跳转到色设置密码
  if (res.code == 200) {
    push("/myinfo");
    Toast(`登录成功`);
  } else {
    Toast(`登录失败`);
  }
};

// 调用图像验证码接口
const FngetImgCode = async () => {
  let res = await getImgCodeAPi();
  const { key, img } = res.data.url;
  data.form.key = key;
  data.getImgCode = img;
};
FngetImgCode();
// 点击图像验证码从新调用
const updateImg = () => {
  console.log(1);
  FngetImgCode();
};
// 点击获取手机号验证码
const getTelVerification = () => {};
const { getImgCode, form } = toRefs(data);
</script>
<template>
  <div class="login">
    <!-- 头部 -->
    <MyDatails>
      <template #left>
        <span
          ><van-icon name="arrow-left" @click="$router.push('/myinfo')" /></span
      ></template>
    </MyDatails>
    <!-- 图片 -->
    <div class="login_img">
      <img src="https://wap.lexuemiao.com/img/logo@2x.a4702f31.png" alt="" />
    </div>
    <!-- 输入框 -->
    <div class="my_input">
      <div class="my_tel">
        <span class="iconfont icon-shouji"></span>
        <input type="text" v-model="form.mobile" placeholder="请输入手机号" />
      </div>
      <div class="my_tel">
        <span class="iconfont icon-beishubaozheng"></span>
        <input
          type="password"
          v-model="form.user_pass"
          placeholder="请输入密码"
        />
      </div>
      <div class="my_Code_num">
        <span class="iconfont icon-beishubaozheng"></span>
        <input v-model="form.captcha" placeholder="请输入验证码" />
        <div class="code" @click="updateImg">
          <img :src="getImgCode" alt="" />
        </div>
      </div>
    </div>
    <van-button
      style="width: 92%; margin: auto; margin-top: 50px"
      type="primary"
      color="#f15a24"
      block
      @click="login"
      >登录</van-button
    >
    <div class="login_footer">
      <span>忘记密码?</span>
      <p @click="$router.push('/Register')">注册/验证码登录</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 750px;
  .login_img {
    padding: 100px 0;
    text-align: center;
    img {
      width: 350px;
      height: 110px;
    }
  }
  //   输入框
  .my_input {
    width: 750px;
    padding: 0 20px;
    .my_tel {
      display: flex;
      align-items: center;
      height: 100px;
      span {
        font-size: 50px;
        color: #f8b418;
        margin: 0 20px;
        // margin-left: 10px;
      }
      input {
        font-size: 20px;
        flex: 1;
        height: 100%;
        border: none;
        border-bottom: 1px solid #ededed;
      }
    }
    .my_Code_num {
      display: flex;
      align-items: center;
      height: 100px;
      div {
        flex: 1;
        height: 100px;
        border-bottom: 1px solid #ededed;
        display: flex;
        align-items: center;
      }
      span {
        font-size: 50px;
        color: #f8b418;
        margin: 0 20px;
        // margin-left: 10px;
      }
      input {
        width: 65%;
        font-size: 20px;
        height: 100%;
        border: none;
        border-bottom: 1px solid #ededed;
      }
      .code {
        line-height: 100px;
        display: flex;
        align-items: center;
        img {
          width: 100%;
        }
      }
    }
  }
  .login_footer {
    width: 750px;
    display: flex;
    align-items: center;
    // margin-top: 20px;
    padding: 20px 60px;
    font-size: 20px;
    justify-content: space-between;
    span {
      color: #999;
    }
    p {
      color: #f18d00;
    }
  }
}
</style>
